<template>
    <div class="box">
        <div>
            <div class="box11">
                <div class="box111">
                    <img src="../assets/精油1.jpg">
                </div>
                <div class="box112">
                    精油专区
                </div>
            </div>
            <div class="box12">
                <div class="box121">
                    实力惊艳
                </div>
                <div class="box122">
                    颜值超群
                </div>
            </div>
            
        </div>
        <ul>
            <li>
                <img src="../assets/精油11.png">
                <div class="cup1">
                    【AFU阿芙】茶树精油（10ml）
                </div>
                <div class="cup2">
                    <div class="cup21">￥99</div>
                    <div class="cup22">￥129</div>
                </div>
            </li>
            <li>
                <img src="../assets/精油11.png">
                <div class="cup1">
                    【AFU阿芙】茶树精油（10ml）
                </div>
                <div class="cup2">
                    <div class="cup21">￥99</div>
                    <div class="cup22">￥129</div>
                </div>
            </li>
            <li>
                <img src="../assets/精油11.png">
                <div class="cup1">
                    【AFU阿芙】茶树精油（10ml）
                </div>
                <div class="cup2">
                    <div class="cup21">￥99</div>
                    <div class="cup22">￥129</div>
                </div>
            </li>
        </ul>
        <div class="youhui">更多优惠GO▶</div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
    .box{
        width: 3.40rem;
        height: 1.95rem;
        margin-left: 0.10rem;
        background-color: #e7ffd8;
        border-radius: 0.04rem;
        margin-top: 0.1rem;
        overflow: hidden;
    }
    .box11{
        margin-top: 0.12rem;
        margin-left: 0.08rem;
        height: 0.21rem;
        line-height: 0.21rem;
    }
    .box111{
        float: left;
        font-size: 0.13rem;
    }
    .box112{
        float: left;
        margin-left: 0.06rem;
        font-size: 0.16rem;
    }
    .box12{
        margin-top: 0.04rem;
        margin-left: 0.08rem;
        height: 0.21rem;
        line-height: 0.21rem;
    }
    .box121{
        width: 0.48rem;
        float: left;
        font-size: 0.12rem;
    }
    .box122{
        width: 0.52rem;
        height: 0.15rem;
        line-height: 0.15rem;
        float: left;
        margin-left: 0.06rem;
        margin-top: 0.03rem;
        font-size: 0.1rem;
        text-align: center
    }
    ul{
       margin-left: 0.06rem; 
       display: flex;
       margin-top: 0.1rem;
    }
    ul li{
        background-color: #fff;
        border-radius: 0.05rem;
        height: 1.2rem;
        width: 1.02rem;
        margin-right: 0.08rem;
    }
    ul li img{
        width: 1.02rem;
        height: 0.74rem;
        border-top-left-radius: 0.05rem;
        border-top-right-radius: 0.05rem;
    }
    .cup1{
        width: 0.84rem;
        height: 0.14rem;
        font-size: 0.10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: auto;
    }
    .cup2{
        margin-top: 0.08rem;
    }
    .cup21{
        float: left;
        font-size: 0.12rem;
        color: #d65a23;
        margin-left: 0.07rem;
    }
    .cup22{
        float: left;
        font-size: 0.12rem;
        color: #8d8f8c;
        text-decoration: line-through;
    }
    .youhui{
        width: 0.74rem;
        height: 0.18rem;
        background-color: #6a8e47;
        color: #fff;
        font-size: 0.1rem;
        position: relative;
        right: -2.54rem;
        top: -1.64rem;
        line-height: 0.18rem;
        text-align: center;
        border-radius: 0.27rem;
    }
</style>